<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Vue 指令 v-if v-show</title>
    </head>
    <body>
        <div id="descr">
            <p>
                1. 插值一般用在文本节点，指令一般用在属性节点。
            </p>
            <p>
                2. v-if 和 v-show 都可以用来隐藏元素，但两者的区别是：
            </p>
            <p>1️⃣ v-if 在值为 falsy 的时候，不会渲染 DOM，而 v-show 仍会渲染进 DOM，只是 CSS 属性 display 的值为 none；</p>
            <p>2️⃣ v-show 不支持 template 元素，也不支持 v-else。</p>
            <p>
                3. v-if 会复用之前的 DOM 元素，这点可以通过为元素增加 key 属性来避免。
            </p>
        </div>
        <div id="app">
                <template v-if="loginType === 'username'">
                    <label>Username:</label>
                    <input placeholder="Enter your username">
                </template>
                <template v-else>
                    <label>Email:</label>
                    <input placeholder="Enter your email address">
                </template>
                <input type="button" @click="toggle()" value="Toggle" />
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script>
            var app = new Vue({
                el: '#app',
                data: {
                    loginType: 'username'
                },
                methods: {
                    toggle: function() {
                        this.loginType = this.loginType === 'username' ? 'address' : 'username';
                    }
                }
            })
        </script>
    </body>
</html>